<template>
  <div >
    <a-form @submit="handleSubmit2" style="width:60%;margin:0px auto;" :form="form">
      <a-row style="margin-top: 10%;">
        <a-col :xs="{ span : 24 }" :sm="{ span:9 }" class="formGroupTitle">设置登录密码</a-col>
      </a-row>
      <a-form-item v-bind="formItemLayout" label="原始登录密码">
        <a-input v-decorator="[
                      'oldpassword',
                      {rules: [{ required: true, message: '请输入原始登录密码' },{
                         
                       }],validateTrigger: 'blur'}
                    ]" type="password" placeholder="请输入原始登录密码" />
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="新登录密码" help="登录密码长度不低于8位，且至少包含数字、大小写字母、特殊字符中的两种">
        <a-input v-decorator="[
                      'loginpassword',
                      {rules: [{ required: true, message: '请输入新登录密码' },{
                         validator: validateToNextPassword
                       }],validateTrigger: 'blur'}
                    ]" type="password" placeholder="请输入新登录密码" />
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="确认新登录密码">
        <a-input name="passwordagain" v-decorator="[
                      'loginpasswordagain',
                      {rules: [{ required: true, message: '请确认新登录密码!' },{
                         validator: compareToFirstPassword,
                       }],validateTrigger: 'blur'}
                    ]" type="password" placeholder="请输入确认新登录密码" />
      </a-form-item>

      <!-- <a-row>
        <a-col :xs="{ span : 24 }" :sm="{ span:9 }" class="formGroupTitle">设置支付密码</a-col>
      </a-row>
      <a-form-item v-bind="formItemLayout" label="原始支付密码">
        <a-input v-decorator="[
                      'oldpayword',
                      {rules: [{ required: true, message: '请输入原始支付密码' },{
                         validator: validateToNextpayword,
                       }],validateTrigger: 'blur'}
                    ]" type="password" placeholder="请输入原始支付密码" />
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="新支付密码" help="支付密码为6位纯数字密码">
        <a-input name="payword" v-decorator="[
                      'payword',
                      {rules: [{ required: true, message: '请输入新支付密码' },{
                         validator: validateToNextpayword,
                       }],validateTrigger: 'blur'}
                    ]" type="password" placeholder="请输入新支付密码" />
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="确认新支付密码">
        <a-input name="paywordagain" v-decorator="[
                      'paywordagain',
                      {rules: [{ required: true, message: '请输入确认新支付密码' },{
                         validator: compareToFirstpayword,
                       }],validateTrigger: 'blur'}
                    ]" type="password" placeholder="请输入确认新支付密码" />
      </a-form-item>

      <a-row>
        <a-col :xs="{ span : 24 }" :sm="{ span:9 }" class="formGroupTitle">设置安全密保</a-col>
      </a-row>
      <a-form-item v-bind="formItemLayout" label="安全密保问题">
        <div>
          <a-select style="width: 60%;" labelInValue v-decorator="[
                      'problem',
                      {rules: [{ required: true, message: '请选择安全密保问题' }]}
                    ]" @change="handleChange" placeholder="请选择安全密保问题">
            <a-select-option value="problem1">您配偶的姓名是？</a-select-option>
            <a-select-option value="problem2">您母亲的姓名是？</a-select-option>
            <a-select-option value="problem3">您父亲的姓名是？</a-select-option>
            <a-select-option value="problem4">您最喜欢的动物是？</a-select-option>
            <a-select-option value="problem5">您的出生地是？</a-select-option>
          </a-select>
        </div>
      </a-form-item>

      <a-form-item v-bind="formItemLayout" label="安全密保答案">
        <a-input v-decorator="[
                      'answer',
                      {rules: [{ required: true, message: '请输入安全密保答案' },{ validator: validateSecurityAnswer, }]}
                    ]" placeholder="请输入安全密保答案" />
      </a-form-item> -->
      <a-row>
        <a-col :xs="{ span : 24 }" :sm="{ span:12,offset:10 }">
          <a-button ghost class="submitButton" html-type="submit" type="primary" :loading="loading">下一步</a-button>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>
<script>
  import { message } from "ant-design-vue";
  import api from "@/common/api";
  import { error } from "util";
  import { fail } from "assert";
  export default {
    data() {
      return {
        // form: this.$form.createForm(this),
        loading: false,
        phonevalue: "",
        emailvalue: "",
        loginpassword: "",
        memberNo: null,
        payPassword: "",
        securityQuestion: "",
        securityAnswer: "",
        formItemLayout: {
          labelCol: {
            xs: { span: 24 },
            sm: { span: 9 }
          },
          wrapperCol: {
            xs: { span: 24 },
            sm: { span: 12, offset: 1 },
            md: { span: 10, offset: 1 }
          }
        }
      };
    },
    beforeCreate() {
      this.form = this.$form.createForm(this);
      
    },
    mounted(){
        this.memberNo = this.$route.params.memberNo
      console.log(this.$route.params.memberNo)
    },
    methods: {
      handleSubmit2(e) {
        e.preventDefault();
        this.form.validateFields((err, values) => {
          if (!err) {
            this.loading = true;
            let data = {
            memberNo: this.memberNo,
            loginPassword: values.oldpassword,
            newLoginPassword: this.loginpassword,
            newLoginPasswordTwice: values.loginpasswordagain,
            // payPassword: values.oldpayword,
            // newPayPassword: this.payPassword,
            // securityQuestion:this.securityQuestion || this.form.getFieldValue("problem"),
            // securityAnswer: this.securityAnswer
            };
            console.log(data)
            this.$axios.post("/agent/safe/force/update",data).then(res=>{
                console.log("res", res);
                if (res.data.code == "OK") {
                    this.loading = false;
                this.$router.push('/userMain')
                } else {
                this.loading = false;
                this.$message.error(res.data.message)
                }
            });
        } 
      });
    },
      validateToNextPassword(rule, value, callback) {
        const form = this.form;
        // 数字 字母 特殊字符 都有
        // if (
        //   value &&
        //   !/^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,30}$/.test(value)
        // ) 
        // 数字 字母 特殊字符 三选二
        if (
          value &&
          !/(?!^(\d+|[a-zA-Z]+|[~!@#$%^&*?]+)$)^[\w~!@#$%^&*?.]{8,30}$/.test(value)
        ) {
          // form.validateFields(['confirm'], { force: true });
          callback("您输入密码的格式有误！");
        } else {
          this.loginpassword = value;
        }
        callback();
      },
      compareToFirstPassword(rule, value, callback) {
        const form = this.form;
        if (value && value !== form.getFieldValue("loginpassword")) {
          callback("两次输入的密码不一致!");
        } else {
          callback();
        }
      },
      // 支付密码验证
      // handleConfirmBlurpay  (e) {
      //   const value = e.target.value;
      //   this.confirmDirty = this.confirmDirty || !!value;
      // },
      validateToNextpayword(rule, value, callback) {
        const form = this.form;
        const reg = new RegExp("^[0-9]{6}$");
        if (value && !reg.test(value)) {
          // form.validateFields(['confirm'], { force: true });
          callback("您输入支付密码的格式有误！");
        } else {
          this.payPassword = value;
        }
        callback();
      },
      validateSecurityAnswer(rule, value, callback) {
        if (value) {
          this.securityAnswer = value;
        } else {
        }
        callback();
      },
      compareToFirstpayword(rule, value, callback) {
        const form = this.form;
        if (value && value !== form.getFieldValue("payword")) {
          callback("两次输入的支付密码不一致!");
        } else {
          callback();
        }
      },
      handleChange(value) {
        this.securityQuestion = value.label;
        // console.log(`Selected: `,this.securityQuestion);
      },
      
    }
  };
</script>

<style lang="scss" scoped>
  .ant-input {
    width: 60%;
  }

  .submitButton {
    width: 8vw;
  }

  .formGroupTitle {
    font-size: 20px;
    font-weight: bold;
    text-align: right;
    margin-bottom: 10px;
  }
</style>